<template>
<div class="com_Header">
  <div class="hhder">
    <div class="top-option">
      <span><a :underline="false">MASKS_SPORTS</a></span>
      <el-divider direction="vertical"></el-divider><!-- 分割线 -->
       <a :underline="false" @click="drawer = true" v-if="userstatus == false">登录</a>

        <!-- <div class="headerloginBox">        -->
        <el-dropdown trigger="hover" @command="handleCommand" size="medium">
          <span class="el-dropdown-link">
            <a :underline="false" v-if="userstatus == true" class="userNcs">
              {{ username }}</a>
          </span>
          <el-dropdown-menu slot="dropdown" class="dropdown_rc">
            <el-dropdown-item command="userCenter">个人中心</el-dropdown-item>
            <el-dropdown-item command="loginout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- </div> -->
    </div>
  </div>
  <div class="header_suckBox" :class="navBarFixed == true ? 'headerSuckBox' :''">


  <div class="header">
      <!-- <el-tooltip class="item" effect="dark" content="首页" placement="bottom-start"> </el-tooltip> -->
    <div class="logo">
  <a @click="toIndex()" title="首页"><img class="company_logo" src="/static/mechine.png" /></a>
    </div>
   
    <div class="menu_nav">
      <el-menu class="el-menu-nav" :default-active="activeIndex" 
       mode="horizontal" background-color="white"
        active-text-color="black" text-color="black"
         @select="handleSelect">
         
        <el-menu-item index="1">所有产品</el-menu-item>
         <!-- <el-menu-item index="3">具体例</el-menu-item> -->
        <el-menu-item index="6">运动系列</el-menu-item>
        <el-menu-item index="7">限时发售</el-menu-item>
        <!-- <el-menu-item index="5">商品详情页</el-menu-item> -->
         <el-menu-item index="4">购物车</el-menu-item>
         <el-menu-item index="5">个人页面</el-menu-item>
        <!-- <el-submenu index="2">
          <template slot="title">更多</template>
          <el-menu-item index="2-1">个人页面</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu> -->
        
      </el-menu>

    </div>

    <div class="searchBox-Header">
      <div class="search-box">
        <el-tooltip class="item" effect="dark" content="点击搜索" placement="left">
          <a href="#" class="iconSearch">
            <img class="searchImg" src="/static/search.png" alt="">
          </a>
        </el-tooltip>

        <input type="text" v-model="searchBtn" class="search-input" placeholder="Search for your needs"
          @keyup.enter="keyupVa()">
      </div>

      <div class="shoplikebtn-box">
        <!-- title="收藏" -->
        <el-tooltip class="item" effect="dark" content="收藏" placement="bottom-start">
          <a @click="drawer_like = true"><img src="/static/collection.png" alt=""
              style="position:relative;top:2px;left:1px;" ></a>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="购物车" placement="bottom-start">
          <a @click="handleSelect(4,0)"><img src="/static/shopcar.png" alt="12" style="position:relative;left:1px;"></a>
        </el-tooltip>

      </div>
    </div>

  </div> <!-- header -->
  </div>

  <!-- 新闻news -->
  <!-- :class="navBarFixed == true ? 'news_info_suck' :''" -->
  <!-- v-show="newsStatus" -->
  <div class="" :class="{'news_info':newsStatus==true,'news_info_hidden':newsStatus==false}">
    <div class="" :class="navBarFixed == true ? 'demm' :''"></div>
    <div style="width:100%;margin:0 auto;padding-bottom:1px;"> 
          <!--   -->
          <el-carousel direction="vertical" height="50px" class="news_info_carousel" indicator-position="none" arrow="never" interval="5000">
            <el-carousel-item v-for="(item,index) in infoNewsList" :key="index">
              <div class="news_info_item">
                <h1 class="info_content">{{ item.content }}</h1>
              </div>
            </el-carousel-item>
          </el-carousel>
      <!-- 12月27日至1月10日，精选产品低至6折，Nike会员更可专享全场商品(特定商品除外)至高90元额外满减优惠及指定NBY产品200元额外满减优
      惠(特定商品除外)至高90元额外满减优惠及指定NBY产品200元额外满减优惠 -->
       <!-- <span class="info_content"></span> -->
    </div>
    
  </div>
  <!-- <cart>
    <h2>不具名插槽</h2>
	  <h2 slot="s1">这里对应的是s1插口</h2>
	  <h2 slot="s2">这里对应的是s2插口</h2>
  </cart> -->
  <!-- login_drawer -->
<div class="drawerTop">
  <el-drawer title="Welcome to Mask-SportsGoods" :visible.sync="drawer" :direction="direction"
    :before-close="handleClose" custom-class="demo-drawer" ref="drawer">
    <!-- <span>我来啦!</span> -->
    <div class="header_eltabs">
      <el-tabs v-model="LRactiveName" @tab-click="TabshandleClick">
        <el-tab-pane label="登录" name="first">
          <!-- 登录Box -->
          <div class="drawer_login">
            <!-- 表单 -->
            <el-form :model="loginform" :rules="login_rules" ref="loginform">
              <el-form-item label="账户" prop="account" :label-width="formLabelWidth">
                <!--  -->
                <div class="elinput">
                  <el-input v-model="loginform.account" autocomplete="off" placeholder="输入您的手机号或账号" maxlength="11">
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="密码" prop="pass" :label-width="formLabelWidth">
                <div class="elinput">
                  <el-input v-model="loginform.pass" autocomplete="off" type="password" maxlength="50" show-password>
                  </el-input>
                </div>
              </el-form-item>
              <div class="elinput" style="width:150px;">
                <!-- <el-form-item  label="访问测试" :label-width="formLabelWidth">
                  <el-select v-model="loginform.region" placeholder="请选择身份">
                  <el-option label="亚索" value="shanghai"></el-option>
                  <el-option label="亚速尔" value="beijing"></el-option>
                  </el-select>
              </el-form-item> -->
              </div>
            </el-form>

            <div class="login_drawer_conformbtn">
              <el-button class="drawer_footer_btn" @click="DrwaerLogin('loginform')" :loading="loading">
                {{ loading ? '提交中 ...' : '登 录' }}</el-button>
              <p v-show="errorShow" style="color:red;">账号或密码错误，请重新登录</p>
            </div>

          </div>
          <div class="login_info">
          </div>
          <!-- 手机号登录 -->
          <div class="phone_login"></div>
        </el-tab-pane>
        <!-- 注册 -->
        <el-tab-pane label="注册" name="second">
          <div class="drawer_login">
            <el-form :model="register_form" :rules="register_form_rules" ref="register_form">
              <el-form-item label="姓名" prop="userName" :label-width="formLabelWidth">
                <div class="elinput">
                  <el-input v-model="register_form.userName" autocomplete="off"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="手机号" prop="account" :label-width="formLabelWidth">
                <div class="elinput">
                  <el-input v-model="register_form.account" autocomplete="off" maxlength="11"></el-input>
                </div>
              </el-form-item>

            </el-form>
            <div class="login_drawer_conformbtn">
              <el-button class="drawer_footer_btn" @click="register('register_form')" :loading="rloading">
                {{ rloading ? '提交中 ...' : '注 册' }}</el-button>
            </div>
            <p v-show="reErrorShow" style="color:red;">手机号无效，选择输入正确手机号</p>
          </div>
        </el-tab-pane>
        <!-- 注册 -->
      </el-tabs>
    </div>
  </el-drawer>
</div>
  <!-- like-drawer -->
  <el-drawer
  title="我是标题"
  :visible.sync="drawer_like"
  :direction="direction_like"
  :before-close="handleClose1">
  <span>我来啦!</span>
  </el-drawer>

</div>
</template>

<script>
// import Cart from './CartLike/drawerCart.vue'
export default {
  inject: [
    "MyMessage","reload"
  ],
  name: 'Header',
  data () {
    return {
      //登录状态
      userstatus:false,
        // 新闻
      newsStatus:true,
      navBarFixed: false,//动态calss 吸顶
      loading: false,
      rloading:false,
      searchBtn:'',
      msg: '',
      activeIndex: '',
      drawer: false,
      direction: 'rtl',
      formLabelWidth: '80px', //表单标签宽度
      // 登录
      loginform: {
            account: '',
            pass: '',
        },
      login_rules: {
        account: [
          { required: true, message: '手机号或账号不能为空', trigger: 'blur' },
          { min: 1, max: 11, message: '格式错误,检查后重新输入', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '格式错误,检查后重新输入', trigger: 'blur' }
        ],
      },
      // 注册
      register_form:{
        userName:'',
        account: '',
      },
      register_form_rules:{
        account: [
          { required: true, message: '手机号或账号不能为空', trigger: 'blur' },
          { min: 11, max: 20, message: '格式错误,检查后重新输入', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 1, max: 20, message: '格式错误,检查后重新输入', trigger: 'blur' }
        ],
      },
      timer: null, 
      // login register
      LRactiveName: 'first',
      drawer_like:false,
      direction_like: 'btt',
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        borderRadius: '4px',
        lineHeight: '45px' 
      },
      infoNewsList:[ 
          { 
            value: 1, 
            content: "12月27日至1月10日，精选产品低至6折，Mask会员更可专享全场商品(特定商品除外)至高90元额外满减优惠及指定NBY产品200元额外满减惠特定商品除外至高90元额外满减优惠及指定NBY产品200元额外满减优惠",
          },{ 
            value: 2, 
            content: "Members get free shipping and free 30-day returns. Members get free shipping and free 30-day returnsMembers get free shipping and free 30-day returnsJoin us Learn more",
          },{ 
            value: 3, 
            content: "价格说明（此说明仅当出现价格比较时有效)划线价格：划线的价格是商品的建议零售价供您参考。 未划线价格：未划线的价格是商品在本平台上的销售标价，具体的成交价格可能因顾客使用优惠券、折扣等情况发生变化，最终以订单结算页价格为准。",
          }
    ],
    errorShow:false,
    reErrorShow:false,

    }
  },
  computed: {
    // 获取用户信息
    username() {
      const user = JSON.parse(sessionStorage.getItem('userInfo'));
      return user.userName;
    }
  },
  methods: {
    handleCommand(command) {
      // const _that = this;
      if (command == "loginout") {
         this.MyMessage("已退出登录")
         sessionStorage.clear();//删除所有
         localStorage.clear();
         this.$router.push('/');
         this.reload();
      } else if (command == "userCenter") {
        // this.$router.push("/user/modifypwd");
        // this.MyMessage("个人中心");
        if(sessionStorage.getItem('userInfo')){
          this.$router.push('/userCenter/userAccount');
        }else{
          this.MyMessage("您的登录已失效！请重新登录。")
          this.reload();
        }

        

      }
    },
    // 搜索
    keyupVa(){
      console.log("我在按回车键");
      console.log(this.searchBtn);
      if(this.searchBtn == ''){
        this.$message('您不能输入空字符');
      }
    },
    // 菜单栏
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        if(sessionStorage.getItem('userInfo')){
          if(key=='1'){
              this.$router.push('/list');
          }else if(key=='3'){
              this.$router.push('/login');
          }else if(key=='4'){
              // this.newsStatus = false;
              this.$router.push('/cart');
          }else if(key=='5'){
              // this.newsStatus = false;
              this.$router.push('/userCenter/userAccount');
          }else{
              this.$router.push('/');
          }
        }else{
          this.drawer = true
          // this.MyMessage("您的登录已失效！请重新登录。")
          // this.reload();
        }
        
      },
      toIndex(){
         this.$router.push('/');
      },
      TabshandleClick(tab, event) {
        console.log(tab, event);
      },
      handleClose(done) {
        // this.$message('关闭');
        // done();
         if (this.loading) {
            return;
         }
        done();
      
        
      },
      DrwaerLogin(formName){
        this.loading = true;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.errorShow = false;
            
            //localStorage.clear();//删除所有
             this.$axios.post('/m-user/login', {
               'userAccount': this.loginform.account,
               'password': this.loginform.pass
             }).then(res => {
              //  this.MyMessage(res.data)
               //res.data.code 1错误  0正确
               if (res.data.code == 0) {
               
                console.log(res.data.data);
                 const userinfo =  JSON.stringify(res.data.data)
                 localStorage.setItem("userId",res.data.data.id);
                 sessionStorage.setItem('userInfo',userinfo);
                 //JSON.parse(sessionStorage.getItem('userinfo')),
                //  this.$store.commit('SET_USER',uu); //用户信息存储到VUEX里
                 setTimeout(() => {
                   this.drawer = false;
                   // 动画关闭需要一定的时间
                   setTimeout(() => {
                     this.loading = false;
                     this.$notify({
                       title: '登录成功',
                       message: '现在你可以愉快的购物了！',
                       type: 'success',
                       position: 'top-left',
                       duration: '2000'
                     });
                     this.reload();//1秒后跳转到home
                   }, 400);
                 }, 500);

               } else {
                 setTimeout(() => {
                   this.loading = false;
                   this.errorShow = true;
                 }, 400);
               }
               // this.MyMessage(res.data)
             }).catch((error) => {
               alert(error);
               this.loading = false;
             });
             }
             else {
               this.loading = false;
               console.log('error submit!!');
               return false;
             }
             });
      },

      register(formName){
         this.rloading = true;
          this.$refs[formName].validate((valid) => {
             if (valid) {
              this.reErrorShow = false;

              this.$axios.post('/m-user/register', {
               'userAccount': this.register_form.account,
               'userName': this.register_form.userName
             }).then(res => {
               if (res.data.code == 0) {
                 const userinfo =  JSON.stringify(res.data.data)
                 sessionStorage.setItem('userInfo',userinfo);

                   setTimeout(() => {
                   this.drawer = false;
                   // 动画关闭需要一定的时间
                   setTimeout(() => {
                     this.rloading = false;
                     this.$notify({
                       title: '注册成功',
                       message: '现在你可以愉快的购物了！',
                       type: 'success',
                       position: 'top-left',
                       duration: '2000'
                     });
                     this.reload();//1秒后跳转到home
                   }, 400);
                 }, 500);
               }else{
                setTimeout(() => {
                   this.rloading = false;
                   this.reErrorShow = true;
                 }, 400);
               }
             }).catch((error) => {
               alert(error);
               this.rloading = false;
             });;

             }else{
              this.rloading = false;
              console.log('error submit!!');
               return false;
             }
          })
      },


      checkLogin(){
        if(sessionStorage.getItem('userInfo')){
          this.userstatus = true;
        }else{
          this.userstatus = false;
        }
        // this.userstatus
      },
      // 关闭抽屉
      cancelForm() {
        this.loading = false;
        this.drawer = false;
        clearTimeout(this.timer);//内置函数
      },
      //吸顶
       watchScrolls() {
          var scrollTop =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;
            // console.log(scrollTop)
            // console.log(scrollTop)
          //  当滚动超过 90 时，实现吸顶效果
          if (scrollTop > 0) {
            this.navBarFixed = true;
          } else {
            this.navBarFixed = false;
          }
          // if(scrollTop > 500){
          //   this.navBarFixed = false;
          // }
        }
    },
  mounted () {
    window.addEventListener("scroll", this.watchScrolls);
    this.checkLogin();
  }
}
</script>

<style scoped>

a{
  cursor: pointer;
}
/* 吸顶导航 */
.header_suckBox{
   z-index:12;
   width: 100%;
   position: relative;
   animation: header_suckBoxAni 300ms;
   animation-fill-mode: forwards;
}
@keyframes header_suckBoxAni{
    from{
      top: -15px;
    }
    to{
      top: 0px;
    }
}
.headerSuckBox{
  /* transition: 1.8s; */
   z-index:12;
   width: 100%;
   position: fixed;
   animation: headerSuckBoxAni 300ms;
   animation-fill-mode: forwards;
}
@keyframes headerSuckBoxAni{
    from{
      top: 20px;
    }
    to{
      top: 0px;
    }
}
.demm{
  position: relative;
  height: 90px;
}

/* 吸顶导航 */


.userNcs{
  font-weight: 600;
}


/* 抽屉 */
.drawerTop >>> .el-drawer__header span{
  font-weight: 500;
  font-size: 25px;
  color: #111;
}
.header_eltabs{
  width: 100%;
  padding: 10px;
  /* border: 2px solid red; */
  height: 500px;
  border-color: rgb(245,245,245);
}
.header_eltabs >>> .el-tabs__nav-wrap::after{
  background-color: transparent !important;
}
.header_eltabs >>> .el-tabs__item{
  font-size: 16px !important;
  left: 12px !important;
  transition: .2s !important;
  font-weight: 500 !important;
  width: 50px !important;

 
}
.header_eltabs >>> .el-tabs__active-bar{
  left: 10px !important;
  /* margin-left: 14px !important; */
  width: 50px !important;
  background-color: #1b1f23 !important;
    /* margin-top: 5px !important; */
}

.header_eltabs >>> .el-tabs__item.is-active{
  color: #1b1f23 !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}
/* .header_eltabs >>> .el-tabs__item:focus{
  font-size: 20px !important;
  font-weight: 600 !important;
} */
.header_eltabs >>> .el-tabs__item:hover{
    color: #1b1f23 !important;
    cursor: pointer !important;
}


.drawer_login{
  position: relative;
  /* border: 1px solid red; */
  top: 10px;
  left: 20px;
  height: 300px;
  width: 100%;
  padding: 10px;
}
/* .elinput >>> .el-input__inner:active{
  border-color:brown !important;
} */
.elinput >>> .el-input__inner{
  width: 250px !important;
  border-radius: 0% !important;
}
.elinput >>> .el-input__inner:focus{
  border-color:rgb(6, 4, 4) !important;
}
.elinput >>> .el-input__suffix{
  right: 115px !important;
}
/* 表单下拉框 */
.elinput >>> .selected{
    color: #1b1f23 !important;
}
.login_drawer_conformbtn{
  /* background: red; */
  width: 250px;
  margin-left: 80px;
  /* border: 1px solid red; */
  /* height: 100px; */
  /* margin: 0 auto; */
}
.drawer_footer_btn{
  background:black;
  color:white;
  width:100%;
  border-radius: 0%;
  font-weight: 800;
}
/* 登录框通知信息 */
.login_info{
  
  width: 80%;
  height: 130px;
  border: 1px solid rgb(2, 2, 2);
  left: 50px;
  top: -40px;
  position: relative;
}



/*  */
.hhder{
/* margin-top: -2px; */
width: 100%;
height:25px;
background: rgb(245,245,245);
/* z-index: 12; */
/* letter-spacing: 0.04em; */
}
.hhder .top-option{
    font-size: 13px;
    color: rgb(3, 3, 3);
    text-align: right;
    position: relative;
    top: 5px;
    right: 45px;
    position: relative;
}


.header {
  justify-content:center;
  display: flex;
  /* position: fixed; */
  box-sizing: border-box;
  width: 100%;
  /* height: 70px; */
  font-size: 22px;
  line-height: 7px;
  background: rgb(255,255,255);
  color: rgb(238, 241, 240);
  /* border: 1px solid red; */
}
.header .logo {
  position: relative;
  background: rgb(253, 253, 253);
  left: 50px;
  /* border: 1px solid red; */
   z-index: 111;
}
.header .logo .company_logo {
  position: relative;
  background: rgb(253, 252, 252);
  /* left: 50px; */
  top: 5px;
  width: 50px;
  height: 50px;
  /* margin-right: 0px; */
  border-radius: 50%;
  
}

.menu_nav{
    position: relative;
    width:100%;
    z-index: 10;
    left: 300px;
    overflow: hidden;
    /* border: 1px solid red; */
}
.menu_nav >>> .el-menu--horizontal{
  border-bottom: none;
}
.el-menu-nav li{
  font-size: 16px;
  font-weight: 500;
}
.el-menu-nav >>> li:hover{
  background: transparent !important;
  border-bottom-color: #111 !important;
}
.el-menu-nav >>> .el-submenu__title{
  font-size: 16px;
  font-weight: 500;
}
/* 搜索框Box */
.searchBox-Header{
    position: relative;
    left:52px;
    width: 100%;
    display: flex;
    /* display: inline; */
    /* border: 1px solid red; */
}
.search-box{
    width: 130px;
     /* width: 100%; */
    position: relative;
    z-index: 1;
    /* left: 200px; */
    /* margin-left: 245px; */
    left: 315px;
    top: 5px;
    float: right;
    /* margin: 0; */
    white-space: nowrap;
    /* transform: translateX(0); */
    transition: width .25s,transform .35s;
    /* border: 1px solid red; */
}
.search-box .iconSearch{
  /* display: inline; */
   /* background: rgb(248,245,245); */
   border-radius: 44%;
   position: relative;
    /* width: 100px; */
     top: 2px;
    left: 16px;
    transition:.2s;
}
.search-box .iconSearch .searchImg{
  /* display: inline; */
  position: relative;
  width:30px;
  height: 30px;
  top:8px;
}
/* .search-box .iconSearch:hover{
 background: rgb(248,245,245);
} */
.search-input{
    width: 120px;
    /* visibility: visible; */
    margin-left: -30px;
    /* position: relative; */
    /* width: 100%; */
    background: rgb(245,245,245);
    color: #524e4e;
    padding: 8px 48px;
    cursor: text;
    height: 25px;
    font-size: 16px;
    border:none;
    outline:none;
    border-radius: 100px;
    transition: width .25s,transform .35s;
    /* border: 1px solid springgreen; */
}
.search-input:hover{
    width: 140px;
    color: #292929;
}
.search-input:active{
   background: #f5f5f5;
    border:none;
}



/* 收藏 购物车 */
.shoplikebtn-box{

  position: relative;
  z-index: 11;
  /* margin-left: 120px; */
  left: 435px;
  /* right: 110px; */
  top: 10px;
  /* width: 100%; */
  /* border: 1px solid rgb(167, 219, 63); */
  display: flex;
}
.shoplikebtn-box a{
  color: #111;
  width: 28px;
  height: 28px;
  padding: 5px;
  background: #ffffff;
  border-radius: 100px;
  margin-left: 3px;
  transition: .25s;
  /* border: 1px solid red; */
}
.shoplikebtn-box a:hover{
  background: #e4dede;
}
.shoplikebtn-box a img{
  width: 25px;
  height: 25px;
}
.news_info_hidden{
    visibility: hidden;
    z-index: 1;
    position: relative;
    margin: 0 auto;
    width:100%;
    /* width: 100px; */
    /* top: 100px; */
    /* transition: .2s; */
    height: auto;
    background: rgb(247,247,247);
    text-align: center;
}
.news_info{
    /* visibility: hidden; */
    z-index: 1;
    position: relative;
    margin: 0 auto;
    width:100%;
    /* width: 100px; */
    /* top: 100px; */
    transition: .8s;
    height: auto;
    background: rgb(247,247,247);
    text-align: center;
}
.news_info_suck{
    /* visibility: hidden; */
    z-index: 3;
    top: 90px;
    position: fixed;
    margin: 0 auto;
    width:100%;
    height: 0px;
    /* transition: .8s; */
    background: rgb(247,247,247);
    text-align: center;
} 
.news_info_carousel{
  height: 100%;
  overflow: hidden;
}
.news_info_item{
  overflow: hidden;
  text-overflow:ellipsis;
  /* background: #c5c4c4; */
  width:900px;
  margin:0 auto;
  height:40px;
/* border:1px solid red */
}
/* .news_info_carousel_item{
  height: 100%;
} */
.info_content{
    vertical-align: middle;
    font-size: 12px;
    color: rgb(34,34,34);
    font-weight: 400;
}

 .dropdown_rc li:hover{
    background: transparent;
    color: #010407;
    /* margin-left: 20px; */
  }
</style>
